<template>
  <div ref='box'>ref-fn-234</div>
  <div> `script setup` 2种写法，都在 console 显示</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const box = ref(null)

onMounted(() => {
  // https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance
  const that = getCurrentInstance() // 这个一般都是定义在外面，可以看下 - 上面的链接
  console.log('`script setup` that=', that)
  const refsBox = that.ctx.$refs.box
  console.log('`script setup` that -> refs=', refsBox, ' is equal ==  `setup const ->  box.vaue`')
  console.log('`script setup` ---------------')
  console.log('`script setup` setup const -> ref=',  box)
  console.log('`script setup` setup const -> ref.value=', box.value)
})


const refPrint = () => {
  console.log('`script setup` --- refPrint ---')
}

// https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose
defineExpose({
  refPrint
})

</script>